<template>
  <div class="container">
    <div class="m-b-20">
      <el-select v-model="selectedType" placeholder="请选择类型" style="width: 200px; margin-right: 20px">
        <el-option v-for="item in typeList" :key="item" :label="item" :value="item" />
      </el-select>
      <el-select v-model="predictDays" placeholder="预测天数" style="width: 200px">
        <el-option label="7天" :value="7" />
        <el-option label="30天" :value="30" />
      </el-select>
    </div>
    <div ref="chart" class="chart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  data() {
    return {
      selectedType: '蔬菜',
      predictDays: 7,
      typeList: ['蔬菜', '水果', '粮食', '油料'],
      mockData: {
        蔬菜: {
          history: [3.2, 3.5, 3.8, 4.0, 4.2, 4.3, 4.5],
          predict7: [4.6, 4.7, 4.8, 4.9, 5.0, 5.1, 5.2],
          predict30: [4.6, 4.7, 4.8, 4.9, 5.0, 5.1, 5.2, 5.3, 5.4, 5.5, 5.6, 5.7, 5.8, 5.9, 6.0, 6.1, 6.2, 6.3, 6.4, 6.5, 6.6, 6.7, 6.8, 6.9, 7.0, 7.1, 7.2, 7.3, 7.4, 7.5]
        },
        水果: {
          history: [5.2, 5.5, 5.8, 6.0, 6.2, 6.3, 6.5],
          predict7: [6.6, 6.7, 6.8, 6.9, 7.0, 7.1, 7.2],
          predict30: [6.6, 6.7, 6.8, 6.9, 7.0, 7.1, 7.2, 7.3, 7.4, 7.5, 7.6, 7.7, 7.8, 7.9, 8.0, 8.1, 8.2, 8.3, 8.4, 8.5, 8.6, 8.7, 8.8, 8.9, 9.0, 9.1, 9.2, 9.3, 9.4, 9.5]
        }
        // 其他类型同理
      }
    }
  },
  watch: {
    selectedType: 'drawChart',
    predictDays: 'drawChart'
  },
  mounted() {
    this.drawChart()
  },
  methods: {
    drawChart() {
      const chart = echarts.init(this.$refs.chart)
      const history = this.mockData[this.selectedType].history
      const predict = this.mockData[this.selectedType][this.predictDays === 7 ? 'predict7' : 'predict30']
      const xData = [...Array(history.length).keys()].map(i => `历史${i+1}`)
        .concat([...Array(predict.length).keys()].map(i => `预测${i+1}`))
      const option = {
        title: {
          text: '不同类型农产品价格未来预测',
          left: 'center',
          textStyle: { fontSize: 30 }
        },
        tooltip: { trigger: 'axis' },
        xAxis: { type: 'category', data: xData },
        yAxis: { type: 'value', name: '价格(元)' },
        series: [
          {
            name: '历史价格',
            type: 'line',
            data: history.concat(Array(predict.length).fill(null)),
            smooth: true
          },
          {
            name: '预测价格',
            type: 'line',
            data: Array(history.length).fill(null).concat(predict),
            smooth: true,
            lineStyle: { type: 'dashed', color: '#ff9800' }
          }
        ]
      }
      chart.setOption(option)
    }
  }
}
</script>
<style lang='scss' scoped>
.container {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
}

.chart {
  width: 100%;
  height: 100%;
  min-height: 300px; /* 设置最小高度，避免图表内容过少时显示不全 */
}
</style>
